<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="2" :sm="4">{{ $t('channel name') }}</el-col>
            <el-col :md="4" :sm="12">{{ $t('stream url') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('framerate') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('buffer mode') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('buffer time') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('protocol') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('video decode') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('audio decode') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('enable') }}</el-col>
        </el-row>
        <div v-for="(data, index) in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px">
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="4" :sm="12">
                    <el-input v-model="data.net.path" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-input v-model="data.net.framerate" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-select v-model="data.net.bufferMode" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option :label="$t('Normal')" :value="0"></el-option>
                        <el-option :label="$t('NoBuffer')" :value="1"></el-option>
                        <el-option :label="$t('Sync')" :value="2"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-input v-model="data.net.minDelay" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-select v-model="data.net.protocol" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option label="UDP" value="udp"></el-option>
                        <el-option label="TCP" value="tcp"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.net.decodeV" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.net.decodeA" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.net.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data', 'audioCodecOptions', 'gainOptions', 'samplerateOptions'])
let audioCodecOptions = ref([])
let gainOptions = ref([])
let samplerateOptions = ref([])
let dataList = ref([])
watchEffect(() => {
    audioCodecOptions.value = props.audioCodecOptions
    gainOptions.value = props.gainOptions
    samplerateOptions.value = props.samplerateOptions

    dataList.value = props.data
})

onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  